<!--
 * @Author: ShiJunJie
 * @Date: 2022-04-01 14:12:19
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-20 10:50:32
 * @Descripttion: 
-->
<template>
  <div class="loginView">
    <div>
      <p class="title">
        <Icon class="logo-icon" icon="logos:vue" />
        {{ $t('welcome') }}
      </p>
    </div>
    <a-form class="loginViewFrom">
      <a-form-item v-bind="validateInfos.userName">
        <a-input v-model:value="modelRef.userName" placeholder="请输入用户名">
          <template #prefix>
            <Icon icon="ph:user-duotone" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="validateInfos.password">
        <a-input-password v-model:value="modelRef.password" placeholder="请输入密码">
          <template #prefix>
            <Icon icon="ri:lock-password-line" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click.prevent="onSubmit" block>登录</a-button>
        <SlidingVerify ref="sliding" @onCallback="setVerifyToken" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { Form, message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { User } from '@/api/user';
import slidingData from '@/components/sliding-verify/success';

const sliding = ref();
const setVerifyToken = data => {
  console.log(data);
};

const router = useRouter();

const modelRef = reactive({
  userName: '',
  password: '',
  verifyToken: ''
});
const rulesRef = reactive({});

const useForm = Form.useForm;
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
  onValidate: (...args) => console.log(...args)
});

const login = async () => {
  const res = await User.login();
  if (!res.code) {
    router.push('/');
  }
  // sliding.value.init(modelRef.userName);
};

function onSubmit() {
  validate()
    .then(result => {
      // message.success({ content: '成功' /*, duration: null*/ })
      // message.warn({ content: '成功' /*, duration: null*/ })
      // message.warning({ content: '成功' /*, duration: null*/ })
      // message.error({ content: '成功' /*, duration: null*/ })
      login();
    })
    .catch(err => {
      message.warn('警告');
    });
}
</script>

// 独立布局
<route lang="yaml">
name: 登录
meta:
  layout: LoginLayout
  requiresAuth: true
</route>

<style lang="scss" scoped>
.loginView {
  padding: 30vh 0 24px;
  min-width: 260px;
  width: 368px;
  margin: 0 auto;

  .title {
    text-align: center;
    font-size: 20px;

    .logo-icon {
      font-size: 40px;
    }

    margin-bottom: 28px;
  }

  .loginViewFrom {
  }
}
</style>
